<template>
  <div style="display: flex;">
    <div style="margin-top: 7px;">
      <i :class="icon" style="font-size: 22px;cursor: pointer;" @click="collapse"></i>
    </div>
    <div style="flex: 1;text-align: center;" >
      <span style="font-size: 23px;font-weight: 600;">仓库管理系统</span>
    </div>
    <el-dropdown>
      <span>{{ user.userName }}</span><i class="el-icon-arrow-down" style="margin-left: 5px;"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      user:JSON.parse(sessionStorage.getItem("user"))
    }
  },
  props:{
    icon:String
  },
  methods:{
    toUser(){
      console.log('to_user');
      this.$router.push("/UserCenter")
    },
    logout(){
      console.log('logout');


      this.$confirm('你确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',  //确认按钮的文字显示
          type: 'warning',
          center: true, //文字居中显示
          // showCancelButton: false, //不显示取消按钮
          // showClose: false, //是否显示右上角的x
          // closeOnClickModal: false, //是否可以点击空白处关闭弹窗
        })
          .then(() => {
            // window.location.href = '#/main/iam/authentication';
            // this.$message({
            //   type:'success',
            //   message:'退出登录成功'
            // })
            
            this.$axios.post("/api/user/logout").then(res => {
            if(res.data.code == '200'){
              this.$message({
              message:"退出登录成功",
              type:"success"
              })
              this.$router.push("/login");
              sessionStorage.clear();
            }else{
              this.$message({
                type:"info",
                message:"已取消退出登录"
              })
            }
      })

          })
          .catch(() => {
      
          });




     
      
      
    },
    collapse(){
      this.$emit('doCollapse')
    }
  }
}
</script>

<style>

</style>